<template>
    <div class="show-view">
        <h1>近期演出</h1>
        <div class="show-list">
            <div class="show-card" v-for="show in shows" :key="show.id">
                <h3>{{ show.title }}</h3>
                <p>时间：{{ show.date }}</p>
                <p>地点：{{ show.location }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const shows = ref([
    { id: 1, title: '经典音乐剧《猫》', date: '2025-03-01', location: '上海大剧院' },
    { id: 2, title: '交响音乐会', date: '2025-03-05', location: '东方艺术中心' }
]);
</script>

<style scoped>
.show-view {
    padding: 2rem;
}

.show-card {
    padding: 1.5rem;
    margin: 1rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>